<!-- 登录页面 -->
<template>
  <div id="login">
    <div class="content-body">
      <div class="content-body-box">
        <!-- 左边的文字链接 -->
        <div class="text-link-box">
          <p>{{IntroTitle}}</p>
          <div v-for="item in IntroContent" :key="item.msg" style="margin-bottom: 5px">
            <router-link to="/adminLogin">{{item.msg}}</router-link>
          </div>
        </div>
        <!-- 右边的登录框 -->
        <div class="login-box">
          <div class="login-box-title">密码登录</div>
          <!-- 表单-->
          <Form ref="formInline" :model="formInline" :rules="ruleInline" inline class="login-form">
            <!-- 账号 -->
            <Form-item prop="user" class="form-user">
              <Input type="text" size="large" v-model="formInline.user" placeholder="手机号/邮箱" clearable class="form-user-box"/>
            </Form-item>
            <!-- 密码 -->
            <Form-item prop="password" class="form-password">
              <Input type="password" size="large" v-model="formInline.password" placeholder="请输入登录密码" clearable class="form-password-box"/>
            </Form-item>
            <!-- 登录按钮 -->
            <Form-item class="form-submit">
              <Button type="primary" long @click="loginSubmit('formInline')" :disabled="!loginSwi" class="form-submit-button" style="font-size: 14px">登录</Button>
            </Form-item>
          </Form>
          <div class="link-bottom-box">
            <router-link to="/adminRegister" class="link-register">免费注册</router-link>
            <router-link to="/adminForget" class="link-forget">忘记密码</router-link>
          </div>
          <div class="link-third-box">
            <div class="link-third-text">其他登录方式: </div>
            <router-link to="/adminLogin"><img src="../../../assets/icon-qq.png" class="link-third-icon-qq" alt=""></router-link>
            <router-link to="/adminLogin"><img src="../../../assets/icon-alipay.png" class="link-third-icon-alipay" alt=""></router-link>
            <router-link to="/adminLogin"><img src="../../../assets/icon-weixin.png" class="link-third-icon-weixin" alt=""></router-link>
            <router-link to="/adminLogin"><img src="../../../assets/icon-taobao.png" class="link-third-icon-taobao" alt=""></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'login',
  components: {
  },
  data () {
    return {
      loginSwi: true,
      IntroTitle: '知乎后台管理',
      IntroContent: [
        {msg: '智能管理用户信息'},
        {msg: '资深程序猿'},
        {msg: '大数据算法'},
        {msg: '数据管理'}
      ],
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  methods: {
    loginSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loginSwi = false
          this.axios.get('/api/admin/login', {
            params: {
              phone: this.formInline.user,
              password: this.formInline.password
            }
          })
            .then((response) => {
              if (response.data.code === 200) {
                this.$store.commit('isAdminLogin', '1')
                sessionStorage.setItem('phone', this.formInline.user)
                this.$Message.success('登入成功!')
                this.$router.push({path: '/adminHomes'})
                this.loginSwi = true
              } else if (response.data.code === 201) {
                this.loginSwi = true
                this.$Message.error('密码错误!')
              } else if (response.data.code === 202) {
                this.loginSwi = true
                this.$Message.error('账号错误!')
              }
            })
            .catch((error) => {
              this.loginSwi = true
              this.$Notice.error({
                title: '通知',
                desc: '后端未启动，异常！'
              })
              console.info(error)
            })
        } else {
          this.$Notice.error({
            title: '通知',
            desc: '请填写完整！'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  #login {
    height: 100%;
    width: 100%;
  }

  .content-body {
    height: 400px;
    width: 100%;
    padding: 140px;
  }

  .content-body-box {
    height: 400px;
    width: 1000px;
    margin: 0 auto;
  }

  .text-link-box {
    height: 400px;
    width: 300px;
    float: left;
    margin-top: 70px;
    margin-left: 40px;
    animation: bounceInLeft 1.5s ease-in;
  }

  .text-link-box p{
    color: white;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
  }

  .text-link-box a{
    color: white;
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 1px;
    margin-left: 5px;
  }

  .login-box {
    height: 350px;
    width: 370px;
    float: right;
    border-radius: 10px;
    background: rgba(204, 204, 204, 0.1);
    padding: 35px 25px 0 25px;
    margin-right: 20px;
    animation: bounceInRight 1.5s ease-in;
    transition: box-shadow 0.5s;
    -moz-transition:box-shadow 0.5s; /* Firefox 4 */
    -webkit-transition:box-shadow 0.5s; /* Safari and Chrome */
    -o-transition:box-shadow 0.5s; /* Opera */
  }

  .login-box:hover {
    background: rgba(87, 87, 87, 0.2);
    box-shadow: 0 0 10px #fff;
  }

  .login-box-title {
    width: 100%;
    height: 40px;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: white;
    margin-bottom: 10px;
  }

  .form-user,.form-password {
    margin-bottom: 25px;
    width: 100%;
  }

  .form-submit {
    margin-bottom: 15px;
    width: 100%;
  }

  .form-submit-button {
    background: #00c1de;
    border-color: #00c1de;
  }

  .link-bottom-box {
    height: 20px;
    width: 100%;
    margin-bottom: 10px;
  }

  .link-forget,.link-register {
    float: right;
    font-size: 12px;
    margin-left: 10px;
    color: #9b9ea0;
  }

  .link-forget:hover,.link-register:hover {
    color: #00c1de;
  }

  .link-third-box {
    height: 30px;
    width: 100%;
  }

  .link-third-text {
    margin: 0 auto;
    float: left;
    line-height: 25px;
    color: white;
  }

  .link-third-icon-qq,.link-third-icon-alipay {
    height: 20px;
    width: 20px;
    margin-left: 10px;
    float: left;
    margin-top: 2px;
  }

  .link-third-icon-weixin,.link-third-icon-taobao {
    height: 22px;
    width: 22px;
    margin-left: 8px;
    float: left;
    margin-top: 1px;
  }
</style>
